<template>
	<view class="page-fade-in" :style="{opacity: pageOpc}">
		<template v-if="pageOpc">
			<view class="content">
				
				
				<view class="shop-info-box">
					<view class="info-item flexWrapNo">
						<view class="item-title">收货人:</view>
						<input placeholder="请输入" placeholder-class="placeholderclass" v-model="receiver" maxlength="20"/>
					</view>
					<view class="info-item flexWrapNo">
						<view class="item-title">联系方式:</view>
						<input placeholder="请填写收货人手机号" placeholder-class="placeholderclass" maxlength="11" v-model="mobile" type="number"/>
					</view>
					<view class="info-item flexWrapNo" @tap="openAddres">
						<view class="item-title">所在地区:</view>
						<view class="flexWrapNo" style="flex: 1;">
							<input placeholder="请选择省市区" disabled placeholder-class="placeholderclass" v-model="addressArr"/>
							<text class="icon-more"></text>
						</view>
					</view>
					<view class="info-item flexWrapNo" style="align-items: flex-start;">
						<view class="item-title">详细地址:</view>
						<textarea placeholder="街道,楼牌号等" placeholder-class="placeholderclass" v-model="address" maxlength="200"></textarea>
					</view>
				</view>
				<view class="lable-box flexWrap">
					<view>标签</view>
					<view class="lable-cont">
						<text @tap="changeTag(index)" :class="{active:tagIndex==index}" v-for="(item,index) in tagList" :key="index">{{item}}</text>
						<text class="add-btn">+</text>
					</view>
				</view>
				<view class="default-box flexWrap">
					<view class="default-left flexWarpColumn">
						<view>设置默认地址</view>
						<view class="tips">提醒:每次下单会默认推荐使用该地址</view>
					</view>
					<switch :checked="isdefault" @change="changeDefault" color="#26BCFD"></switch>
				</view>
				<view class="bottom-box flexWrapNo" @tap="addressSave()">
					<view class="define-btn">确定</view>
				</view>
				<view class="picker-box" v-if="pickerFlag">
					<view class="picker-top flexWrap">
						<view @tap="closePicker">取消</view>
						<view class="confirm-btn" @tap="confirm()">确定</view>
					</view>
					<picker-view  :indicator-style="indicatorStyle" :value="value" @change="bindChange" class="picker-view">
					    <picker-view-column>
					        <view class="item" v-for="(item,index) in provinceList" :key="index">{{item.name}}</view>
					    </picker-view-column>
					    <picker-view-column>
					        <view class="item" v-for="(item,index) in cityList" :key="index">{{item.name}}</view>
					    </picker-view-column>
						<picker-view-column>
						    <view class="item" v-for="(item,index) in areaList" :key="index">{{item.name}}</view>
						</picker-view-column>
					</picker-view>
				</view>
				<view class="mask-wrap" v-if="pickerFlag"></view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageOpc: 0,
				province_id:"",
				city_id:"",
				area_id:"",
				address:"",
				mobile:"",
				receiver:"",
				isdefault:false,
				tag:"家",
				tagList:["家","学校","公司"],
				tagIndex:0,
				addressId:"",
				indicatorStyle: `height: 100rpx;`,
				pickerFlag:false,
				cityList:[],
				provinceList:[],
				areaList:[],
				value:[0,0,0],
				addressArr:""
			}
		},
		onLoad(ops) {
			this.addressId=ops.addressId
			if(this.addressId){
				this.getAddress();
			}
			this.getAreaList();
		},
		onReady() {
			setTimeout(() => {
				this.pageOpc = 1
			}, 100)
		},
		methods: {
			openAddres(){
				this.pickerFlag=true
			},
			closePicker(){
				this.pickerFlag=false
			},
			bindChange(e){
				console.log(e)
				this.value=e.detail.value
				let provinceIndex=this.value[0]
				let cityIndex=this.value[1]
				let areaIndex=this.value[2]
				let preProvinceId=this.province_id
				let precityId=this.city_id
				let preareaId=this.area_id
				this.province_id=this.provinceList[provinceIndex].value
				this.city_id=this.cityList[cityIndex].value
				this.area_id=this.areaList[areaIndex].value
				if(preProvinceId!=this.province_id){
					this.value[1]=0
				}
				if(precityId!=this.city_id){
					this.value[2]=0
				}
				this.getAreaList();
			},
			confirm(){
				this.pickerFlag=false
				let provinceIndex=this.value[0]
				let cityIndex=this.value[1]
				let areaIndex=this.value[2]
				this.province_id=this.provinceList[provinceIndex].value
				this.city_id=this.cityList[cityIndex].value
				this.area_id=this.areaList[areaIndex].value
				this.addressArr=this.provinceList[provinceIndex].name+this.cityList[cityIndex].name+this.areaList[areaIndex].name
			},
			getAreaList(){
				this.$request.get(this.$api.areaList, {}, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						this.provinceList=data
						if(!this.province_id){
							this.province_id=this.provinceList[0].value
						}
						this.getProvinceList();
					}
				})
			},
			getProvinceList(){
				this.$request.get(this.$api.areaList, {
					province_id:this.province_id
				}, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						this.cityList=data
						if(!this.city_id){
							this.city_id=this.cityList[0].value
						}else{
							this.city_id=this.cityList[this.value[1]].value
						}
						this.getCityList();
					}
				})
			},
			getCityList(){
				this.$request.get(this.$api.areaList, {
					province_id:this.province_id,
					city_id:this.city_id
				}, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						this.areaList=data
					}
				})
			},
			// 获取任务信息
			getAddress(){
				this.$request.post(this.$api.addressDetail, {
					id:this.addressId
				}, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						this.receiver=data.receiver
						this.mobile=data.mobile
						this.address=data.address
						this.province_id=data.province_id
						this.city_id=data.city_id
						this.area_id=data.area_id
						this.isdefault=data.isdefault==0?false:true
						this.tagIndex=this.tagList.findIndex(item=>item==data.tag)
						this.addressArr=data.parentAddress
					}
				})
			},
			changeDefault(e){
				this.isdefault=e.detail.value
				console.log(Number(this.isdefault))
			},
			changeTag(index){
				this.tagIndex=index
				this.tag=this.tagList[index]
			},
			// 新建、修改地址
			addressSave(){
				if(!this.receiver){
					this.$tools.showToast('请填写收货人');
					return;
				}else if(!this.mobile){
					this.$tools.showToast('请填写手机号');
					return;
				}else if(!this.province_id){
					this.$tools.showToast('请选择省市区');
					return;
				}else if(!this.address){
					this.$tools.showToast('请填写详细地址');
					return;
				}
				this.$request.post(this.$api.addressSave, {
					id:this.addressId||'',
					store_id:uni.getStorageSync('store_id'),
					province_id:this.province_id,
					city_id:this.city_id,
					area_id:this.area_id,
					address:this.address,
					mobile:this.mobile,
					receiver:this.receiver,
					isdefault:Number(this.isdefault),
					tag:this.tag
				}, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						this.$tools.showToast('操作成功');
						setTimeout(()=>{
							uni.navigateBack()
						},1000)
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.picker-box{
		position: fixed !important;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		background: #FFFFFF;
		z-index: 999;
		.picker-top{
			padding: 30upx 50upx;
			.confirm-btn{
				color: #26BCFD;
			}
		}
		.picker-view {
			width: 750rpx;
			height: 400rpx;
			.item {
				line-height: 100rpx;
				text-align: center;
				color: #000;
			}
		}
	}
	.content {
		padding: 0 36upx;
		.shop-info-box {
			.info-item {
				font-size: 28upx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 40upx;
				color: #FFFFFF;
				padding: 40upx 0;
				border-bottom: 1upx solid #36355E;
				picker{
					flex: 1;
				}
				.item-title{
					margin-right: 32upx;
					flex: none;
				}
				.small{
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					margin:0 40upx;
				}
				.select-input{
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFE577;
					flex: 1;
				}
				input {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFE577;
					flex: 1;
				}

				.icon-more {
					border-color: #FFFFFF;
				}

				.placeholderclass {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFE577;
				}
				textarea{
					font-size: 28rpx;
					border-radius: 16upx;
					height: 100upx;
					color: #FFE577;
				}
			}
		}
		.lable-box{
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			margin: 32upx 0;
			.lable-cont{
				text{
					display: inline-block;
					height: 68rpx;
					line-height: 68upx;
					background: #1A185B;
					border-radius: 34rpx;
					padding: 0 20upx;
					margin-left: 20upx;
				}
				.add-btn{
					width: 92rpx;
					height: 68rpx;
					padding: 0;
					text-align: center;
				}
				.active{
					color: #FFFFFF;
					background: #26BCFD;
				}
			}
		}
		.default-box{
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			.tips{
				font-size: 24rpx;
				color:#5D5C7D;
				margin-top: 12upx;
			}
		}
		.bottom-box{
			height: 120rpx;
			background: #1D1C5C;
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			justify-content: center;
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			.define-btn{
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 80rpx;
				width: 322rpx;
				height: 80rpx;
				background: #26BCFD;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				text-align: center;
			}
		}
	}
</style>
